<?php
$this->title='reading';
use \yii\helpers\HtmlPurifier;
$this->registerJsFile('@web/js/highlightq.js',['depends'=>['app\assets\AppAsset']]);
$this->registerJSFile('@web/js/readingadd.js',['depends'=>['app\assets\AppAsset']]);
$this->registerJSFile('@web/js/note.js',['depends'=>['app\assets\AppAsset']]);
$options=[];
foreach ($read_option as $a)
{
    switch($a['options'])
    {
        case 'A':
            $options['A']=$a['content'];
            break;
        case 'B':
            $options['B']=$a['content'];
            break;
        case 'C':
            $options['C']=$a['content'];
            break;
        case 'D':
            $options['D']=$a['content'];
            break;
    }
}
?>
<form action="?r=reading/index" id="nextque" method="post">
    <input type="hidden" name="que" value="<?=$que;?>">
    <input name="_csrf" type="hidden" id="_csrf" value="<?= Yii::$app->request->csrfToken ?>">
    <input name="usercheck" type="hidden" value="">
    <input type="hidden" name="post_type" value="">
    <input type="hidden" name="que_option" value="">
    <input type="hidden" name="user_key" value="">
</form>
<script>
    window.onload = function () {
        gotoPragraph(<?=$read_question['paragraph']?>);
        <?php
        if(isset($user_key[$que-1]))
        {
            foreach ($user_key[$que-1] as $item)
            echo "$('#".$item."').addClass('btn-warning img-rounded');";
        }
        ?>
        var $wordsel=$(".bg-info>span");
        var step2=true;
        $wordsel.click(function(){
            var sel=isselected();
            if (sel==0) {
                $(this).removeClass("btn-warning");
                alert("请先选择题目类型");
            }else{

                if (step2) {
                    $(".cur-line").stop(true).animate({width:"60%"},1500);
                    step2=false;
                }
                // $(this).siblings('span').removeClass("btn-warning");
            }
        });
        var $submit_time=$("[name=post_type]").clone(true).attr("name","time");
        $submit_time.appendTo("#nextque");
        var t=0;
        //计时
        $.ajax({
            url: "?r=ajax/gettime&state=<?=$state;?>&token=<?=$token;?>",
            dataType: 'json',
            type: 'get',
            success: function (data) {;
                var $time=$("i.fa-clock-o");
                var sec=data.time;          //初始时间，以秒为单位
                setInterval(
                    function(){
                        sec++;
                        t++;
                        $time.html(secToMin(sec));
                        $submit_time.val(t);
                    },1000);
            }
        });
    };
</script>
<div class="container">
    <div class="leadx row clearfix">
        <div class="col-xs-3 pull-left">
            <span><?=strtoupper($class2_name);?>-<?=$read_content['class_num'];?> Reading Passage <?=$read_content['passage'];?> of 3</span>
        </div>
        <div class="col-xs-1 pull-left notebook">
            <a href="#"><span><i class="fa fa-pencil-square-o"></i> 笔记</span></a>
        </div>
        <div class="col-xs-1 pull-right">
            <span><i class="fa fa-clock-o"></i></span>
        </div>
    </div>
    <div class="read-wrap">
        <div class="read-info row">Question <?=$read_question['tnum'];?> of <?=$read_question_num;?></div>
        <div class="col-xs-5 read-spe">
            <div class="spe-step-ch clearfix">
                <div class="step pull-left">Begin!</div>
                <div class="step pull-left">选择题目类型</div>
                <div class="step pull-left">从题文中选关键句</div>
                <div class="step pull-right">排除法选择</div>
            </div>  
            <div class="read-line">
                <div class="total-line"></div>
                <div class="cur-line"></div>
                <!-- <div class="read-current">
                    <img src="<?//=Url::to('@web/images/12.png');?>">
                </div> -->
            </div>
            <div class="spe-step-en clearfix">
                <div class="step pull-left">Step 1</div>
                <div class="step pull-left">Step 2</div>
                <div class="step pull-left">Step 3</div>
            </div>
            <div class="read-que">
                <p class="que">
                    <?php
                    echo $read_question['tnum'];
                    echo ".";
                    echo $read_question['content'];
                    ?>
                </p>
                <div class="read-sel">
                    <select class="form-control" id="types">
                        <option>题目类型</option>
                        <option <?php if(isset($que_option[$que-1])){if($que_option[$que-1]==1)echo "selected='selected'";}?>>事实信息题</option>
                        <option <?php if(isset($que_option[$que-1])){if($que_option[$que-1]==2)echo "selected='selected'";}?>>否定事实信息题</option>
                        <option <?php if(isset($que_option[$que-1])){if($que_option[$que-1]==3)echo "selected='selected'";}?>>推断题</option>
                        <option <?php if(isset($que_option[$que-1])){if($que_option[$que-1]==4)echo "selected='selected'";}?>>修辞目的题</option>
                        <option <?php if(isset($que_option[$que-1])){if($que_option[$que-1]==5)echo "selected='selected'";}?>>词汇题</option>
                        <option <?php if(isset($que_option[$que-1])){if($que_option[$que-1]==6)echo "selected='selected'";}?>>指代题</option>
                        <option <?php if(isset($que_option[$que-1])){if($que_option[$que-1]==7)echo "selected='selected'";}?>>句子简化题</option>
                        <option <?php if(isset($que_option[$que-1])){if($que_option[$que-1]==8)echo "selected='selected'";}?>>文本插入题</option>
                        <option <?php if(isset($que_option[$que-1])){if($que_option[$que-1]==9)echo "selected='selected'";}?>>文章小结题</option>
                        <option <?php if(isset($que_option[$que-1])){if($que_option[$que-1]==10)echo "selected='selected'";}?>>表格题</option>
                    </select>
                </div>
                <div class="ans">
                    <form class="form">
                        <div class="ans-opt clearfix">
                            <div class="checkbox pull-left">
                                <label for="ans1-false">
                                    <span class="ans-op false <?php if(isset($answer[$que-1])){if($answer[$que-1][0]==1)echo 'ischecked';}?>"><i class="fa fa-times"></i></span>
                                    <input type="radio" id="ans1-false" name="ans1" class="hidden" value="ans1-1">
                                </label>
                            </div>
                            <div class="checkbox pull-left">
                                <label for="ans1-true">
                                    <span class="ans-op true <?php if(isset($answer[$que-1])){if($answer[$que-1][0]==2)echo 'ischecked';}?>"><i class="fa fa-check"></i></span>
                                    <input type="radio" id="ans1-true" name="ans1" class="hidden" value="ans1-2">
                                </label>
                            </div>
                            <div class="checkbox pull-left">
                                <label for="ans1-nottrue <?php if(isset($answer[$que-1])){if($answer[$que-1][0]==3)echo 'ischecked';}?>">
                                    <span class="ans-op nottrue">?</span>
                                    <input type="radio" id="ans1-nottrue" name="ans1" class="hidden" value="ans1-3">
                                </label>
                            </div>
                            <span class="ans-select pull-left">A.</span>
                            <span class="que-text pull-left">
                                <?=$options['A'];?>
                            </span>
                        </div>
                        <div class="ans-opt clearfix">
                            <div class="checkbox pull-left">
                                <label for="ans2-false">
                                    <span class="ans-op false <?php if(isset($answer[$que-1])){if($answer[$que-1][1]==1)echo 'ischecked';}?>"><i class="fa fa-times"></i></span>
                                    <input type="radio" id="ans2-false" name="ans2" class="hidden" value="ans2-1">
                                </label>
                            </div>
                            <div class="checkbox pull-left">
                                <label for="ans2-true">
                                    <span class="ans-op true <?php if(isset($answer[$que-1])){if($answer[$que-1][1]==2)echo 'ischecked';}?>"><i class="fa fa-check"></i></span>
                                    <input type="radio" id="ans2-true" name="ans2" class="hidden" value="ans2-2">
                                </label>
                            </div>
                            <div class="checkbox pull-left">
                                <label for="ans2-nottrue">
                                    <span class="ans-op nottrue <?php if(isset($answer[$que-1])){if($answer[$que-1][1]==3)echo 'ischecked';}?>">?</span>
                                    <input type="radio" id="ans2-nottrue" name="ans2" class="hidden" value="ans2-3">
                                </label>
                            </div>
                            <span class="ans-select">B.</span>
                            <span class="que-text">
                                <?=$options['B'];?>
                            </span>
                        </div>
                        <div class="ans-opt clearfix">
                            <div class="checkbox pull-left">
                                <label for="ans3-false">
                                    <span class="ans-op false <?php if(isset($answer[$que-1])){if($answer[$que-1][2]==1)echo 'ischecked';}?>"><i class="fa fa-times"></i></span>
                                    <input type="radio" id="ans3-false" name="ans3" class="hidden" value="ans3-1">
                                </label>
                            </div>
                            <div class="checkbox pull-left">
                                <label for="ans3-true">
                                    <span class="ans-op true <?php if(isset($answer[$que-1])){if($answer[$que-1][2]==2)echo 'ischecked';}?>"><i class="fa fa-check"></i></span>
                                    <input type="radio" id="ans3-true" name="ans3" class="hidden" value="ans3-2">
                                </label>
                            </div>
                            <div class="checkbox pull-left">
                                <label for="ans3-nottrue">
                                    <span class="ans-op nottrue <?php if(isset($answer[$que-1])){if($answer[$que-1][2]==3)echo 'ischecked';}?>">?</span>
                                    <input type="radio" id="ans3-nottrue" name="ans3" class="hidden" value="ans3-3">
                                </label>
                            </div>
                            <span class="ans-select">C.</span>
                            <span class="que-text">
                                <?=$options['C'];?></span>
                        </div>
                        <div class="ans-opt clearfix">
                            <div class="checkbox pull-left">
                                <label for="ans4-false">
                                    <span class="ans-op false <?php if(isset($answer[$que-1])){if($answer[$que-1][3]==1)echo 'ischecked';}?>"><i class="fa fa-times"></i></span>
                                    <input type="radio" id="ans4-false" name="ans4" class="hidden" value="ans4-1">
                                </label>
                            </div>
                            <div class="checkbox pull-left">
                                <label for="ans4-true">
                                    <span class="ans-op true <?php if(isset($answer[$que-1])){if($answer[$que-1][3]==2)echo 'ischecked';}?>"><i class="fa fa-check"></i></span>
                                    <input type="radio" id="ans4-true" name="ans4" class="hidden" value="ans4-2">
                                </label>
                            </div>
                            <div class="checkbox pull-left">
                                <label for="ans4-nottrue">
                                    <span class="ans-op nottrue <?php if(isset($answer[$que-1])){if($answer[$que-1][3]==3)echo 'ischecked';}?>">?</span>
                                    <input type="radio" id="ans4-nottrue" name="ans4" class="hidden" value="ans4-3">
                                </label>
                            </div>
                            <span class="ans-select">D.</span>
                            <span class="que-text">
                                <?=$options['D'];?>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-xs-7 read-text text-editor">
            <p align="center"><b><?=$read_content['title'];?></b></p>
            <?php
            echo $read_content['content'];
            ?>
        </div>
    </div>
    
</div>
<div class="add-note hidden">
    <div class="row">
        <div class="col-xs-7 text-note">xxxxxxxx</div>
        <div class="col-xs-5 add-note-text">+加到笔记</div>
    </div>
    <div class="row">
        <div class="col-xs-12 add-left">+添加到左侧答案栏</div>
    </div>
</div>
<div class="addnote">
    <div class="note-lead">
        <span id="note-word">笔记</span>
        <span class="close"><i class="fa fa-times"></i></span>
    </div>
    <div class="note-text">
        <div contenteditable="true" id="note-self"><?=HtmlPurifier::process($my_note['note']);?></div>
    </div>
    <form action="#" id="note-form">
        <button type="button" name="note-save" id="note-submit">Save and Close</button>
        <input type="hidden" name="saved-note" value="">
    </form>
</div>
